Summary of the PR

The Goal

building an NFTE component, that relies on @cura/hooks and @cura/components

What and why?

hooks

NFT data is scattered on-chain and off-chain. That's why having new hooks that takes care of fetching data would make it look cleaner and it would also be reusable in new projects.

The new hooks are:

• useViewNFTMethod is used to call view methods from the NEAR blockchain. It's mainly used within others hooks
• useNFTContractMetadata is used to get the metadata of the contract, this was needed in the NFTE component because of the base_url that we used in combination with the media hash to build a full link
• useNFT is used to get the metadata of the NFT token
• useNFTReference is used to fetch the additional NFT info from the reference URI provided by the NFT metadata
• useNFTContentType is used to determine the media type from given URI and if the media is a text we return it too, so we don't to call the same URI again.

Also, some changes has been done:

• I moved all NFT related hooks to a new folder called NFT, to keep things organized
• useNFTContract and useNFTMethod have been separated each on their own folder, to stay consistent with other hooks
• Added a short doc above each hook
• Added new tests for the NFT hooks, because we don't have any direct way to test the hooks, this will help make sure nothing breaks when we change something in the hooks.
• Inside near-utils.js moved some methods from changeMethods to viewMethods because they don't require gas and we need that ability in NFTE so it's usable anywhere in the web.

And some notes:

• I made a README file but decided to remove it, because it would be better if we had hooks documentation with other docs. I will make a new issue for it.
• There is no way to switch between networks so the tests can fail if you set the network to mainnet. I made an issue for it Configuration for the hooks package #95

components

the NFTE component rely on other components and mainly MediaObject and Metadata which are used to display the data that we fetched using hooks then processed inside the NFTE

The new components are:

• NFTE the goal of this PR
• Placeholder which can be used to improve user experience while the we load data and it has been used inside MediaObject and Metadata components
• MediaObject which is used to display the media in the its correct HTML element

Other changes:

• Metadata has been rewritten to display more info about the NFT and it has a loading state now
• New stories has been added to match the components

Notes about NFTE:

• The NFTE relies on 3 hooks to fetch data, 2 on-chain and 1 off-chain.
• The NFTE gets data first from the NFT on-chain metadata and replace empty strings from off-chain metadata using the reference.
• The NFTE support currently Mintbase.io and Paras.id and Cura.run. A different NFT contract than this three may or may not break it.

frontend

All edits in the frontend are just to match hooks and components updates.

• In the old version, we used RenderIframe to display all medias, but now it has been switched to MediaObject
• create page now uses an iframe to render the HTML
• view pages have been updated to not pass gas to useNFTMethod hook because the method used is a viewMethod and passing gas breaks it.

Github workflow

hooks test has been added to Github workflow